const App = {
  data() {
    return {
      dialogFormVisible: false,
      dialogForm: {
        selectedWorkbook: "", // 存储选中的工作簿名称
      },
      excelWorkbook: null, // 新增：存储完整的 Excel 工作簿对象（wb）
      workbookList: [], // 存储Excel中的所有工作簿名称（如["sheet1", "sheet2"]）
      formLabelWidth: "120px",
      fileList: [],
      tableData: [],
      form: {
        page: 1,
        limit: 15,
      },
      loading: false,
      success: 0,
      error: 0,
    };
  },
  mounted() {},
  methods: {
    handleRemove(index) {
      //移除当前行
      this.$confirm("是否要删除此行?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(index);

          // this.tableData = this.tableData.filter(
          //   (i, id) => id != (this.form - 1) * this.limit + index
          // );
          this.tableData.splice(index, 1);
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 返回按钮
    goBack() {
      window.history.back();
    },
    // 选择文件按钮
    handleUpload({ raw }, row) {
      console.log({ raw }, row);
      const that = this;
      //FileReader获取文件流
      var reader = new FileReader();
      reader.readAsBinaryString(raw);
      reader.onload = function (e) {
        try {
          console.log(e);
          var data = e.target.result;
          var wb = XLSX.read(data, {
            type: "binary", //以二进制的方式读取
          });
          console.log(wb);
          that.excelWorkbook = wb;
          if (wb.SheetNames.length != 1) {
            // 存储工作簿列表并显示弹窗
            that.workbookList = wb.SheetNames;
            that.dialogFormVisible = true; // 显示弹窗
          } else {
            console.log(wb.Sheets);

            console.log(wb.SheetNames[0]);

            // 导入数据
            var sheet = wb.Sheets[wb.SheetNames[0]]; //sheet0代表excel表格中的第一页
            var json = XLSX.utils.sheet_to_json(sheet); //利用接口实现转换。
            console.log(sheet);
            console.log(json);
            that.tableData = json.map((item) => {
              // 1. 处理Excel日期格式（原始数据的“出生日期”是数字，如45917 → 转换为YYYY-MM-DD）
              const convertExcelDate = (excelNum) => {
                if (!excelNum) return ""; // 空值处理
                // Excel日期起点是1900-01-00，需修正1天偏移（Excel的bug）
                const baseDate = new Date(1900, 0, 1);
                baseDate.setDate(baseDate.getDate() + excelNum - 2); // 偏移修正
                // 格式化为YYYY-MM-DD（补0处理，如1月→01）
                return `${baseDate.getFullYear()}-${(baseDate.getMonth() + 1)
                  .toString()
                  .padStart(2, "0")}-${baseDate
                  .getDate()
                  .toString()
                  .padStart(2, "0")}`;
              };
              // 返回一个新对象，使用新的键名
              return {
                complaintperson: item.上报人姓名,
                complaintperson_mobile: item.上报人联系方式,
                Source: item["事件来源：电话，小程序，公众号"],
                content: item.内容,
                Village_SerialNumber: item.村行政编号,
                title: item.标题,
                Address: item.详细地址,
                status: "提交",
                isStatus: "0", // 初始状态：待导入
                Cause: "", // 初始无错误原因
              };
            });
          }
        } catch (err) {
          // 错误提示（使用之前修复的 ElMessageBox）
          ElMessageBox.alert("文件解析错误，请检查格式", "错误", {
            confirmButtonText: "确定",
          });
        }
      };
    },
    confirm() {
      let wb = this.excelWorkbook;
      var sheet = wb.Sheets[this.dialogForm.selectedWorkbook]; //sheet0代表excel表格中的第一页
      var json = XLSX.utils.sheet_to_json(sheet); //利用接口实现转换。
      console.log(sheet);
      console.log(json);
      this.tableData = json.map((item) => {
        // 1. 处理Excel日期格式（原始数据的“出生日期”是数字，如45917 → 转换为YYYY-MM-DD）
        const convertExcelDate = (excelNum) => {
          if (!excelNum) return ""; // 空值处理
          // Excel日期起点是1900-01-00，需修正1天偏移（Excel的bug）
          const baseDate = new Date(1900, 0, 1);
          baseDate.setDate(baseDate.getDate() + excelNum - 2); // 偏移修正
          // 格式化为YYYY-MM-DD（补0处理，如1月→01）
          return `${baseDate.getFullYear()}-${(baseDate.getMonth() + 1)
            .toString()
            .padStart(2, "0")}-${baseDate
            .getDate()
            .toString()
            .padStart(2, "0")}`;
        };
        // 返回一个新对象，使用新的键名
        return {
          complaintperson: item.上报人姓名,
          complaintperson_mobile: item.上报人联系方式,
          Source: item["事件来源：电话，小程序，公众号"],
          content: item.内容,
          Village_SerialNumber: item.村行政编号,
          title: item.标题,
          Address: item.详细地址,
          status: "提交",
          isStatus: "0", // 初始状态：待导入
          Cause: "", // 初始无错误原因
        };
      });
      console.log(this.tableData);

      // 关闭弹窗
      this.dialogFormVisible = false;
    },
    downloadTemplate() {
      window.location.href = "./download/导入事件数据模版.xlsx";
    },
    submitUpload(i = 0) {
      // 当i=0时，表示开始新的上传，需要重置状态和计数器
      if (i === 0) {
        console.log("开始新的上传，重置失败记录状态");

        // 重新计算统计数据：基于当前记录状态
        this.success = this.tableData.filter(
          (item) => item.isStatus === "1"
        ).length;
        this.error = 0; // 重置错误计数，因为要重新尝试失败的记录

        // 只重置失败的记录状态，保持成功记录不变
        this.tableData.forEach((item) => {
          if (item.isStatus === "2") {
            // 只重置失败的记录
            item.isStatus = "0"; // 重置为待上传状态
            item.Cause = ""; // 清空失败原因
          }
          // 成功的记录(isStatus === "1")保持不变
        });

        console.log(`已成功：${this.success}条，准备重新上传失败的记录`);
      }

      if (i < this.tableData.length) {
        console.log(i);
        // 检查当前记录是否已成功上传，若是则直接处理下一条
        if (this.tableData[i].isStatus === "1") {
          console.log(`第${i + 1}条记录已成功，跳过上传`);
          setTimeout(() => this.submitUpload(i + 1), 0);
          return; // 跳过当前记录的后续处理
        }
        console.log(this.tableData[i]);
        this.loading = true;

        // 1. 定义校验规则：字段名 -> 错误提示
        const validateRules = [
          { field: "complaintperson", message: "上报人姓名不能为空" },
          {
            field: "complaintperson_mobile",
            message: "上报人联系方式不能为空",
          },
          { field: "Source", message: "事件来源不能为空" },
          { field: "content", message: "事件内容不能为空" },
          { field: "Village_SerialNumber", message: "村行政编号不能为空" },
          { field: "title", message: "标题不能为空" },
          { field: "Address", message: "详细地址不能为空" },
        ];

        // 2. 循环校验规则
        let validatePass = true;
        let errorMessage = "";

        for (const rule of validateRules) {
          if (!this.tableData[i][rule.field]) {
            validatePass = false;
            errorMessage = rule.message;
            break; // 找到第一个不通过的规则就退出
          }
        }

        // 3. 处理校验结果
        if (!validatePass) {
          // 校验不通过
          this.tableData[i].isStatus = "2";
          this.tableData[i].Cause = errorMessage;
          this.error++;
          // 校验失败后继续处理下一条
          setTimeout(() => this.submitUpload(i + 1), 0);
          return;
        } else {
          this.submitForm(this.tableData[i], (res) => {
            if (res.Status === "success") {
              this.tableData[i].isStatus = "1";
              this.success++;
            } else {
              // 无论接口返回什么错误，都标记为失败
              this.tableData[i].isStatus = "2";
              this.tableData[i].Cause =
                res.Message || "导入失败请检查是否身份证已存在"; // 使用接口返回的错误信息
              this.error++;
            }
            // 移到这里：确保状态更新后再处理下一条
            setTimeout(() => this.submitUpload(i + 1), 0);
          });
        }
      } else if (i !== 0) {
        this.loading = false;
        // 提示信息显示累计的成功/失败总数
        this.$message.success(
          `批量导入结束！累计成功：${this.success}条，累计失败：${this.error}条`
        );
      } else {
        this.$message({
          message: "请先导入模板后再上传",
          type: "warning",
        });
      }
    },
    submitForm(data, callback) {
      console.log(data);
      // return;
      let lArray = new Array();
      lArray.push(data);
      let lJSONObject_complaints = new Object();
      lJSONObject_complaints.complaints = lArray; //换表
      let lJSONObject_DataSet = new Object(); // Modify
      lJSONObject_DataSet.Add = lJSONObject_complaints; //换表

      // 添加超时处理
      let timeoutId = setTimeout(() => {
        callback({
          Status: "error",
          Message: "网络请求超时，请检查网络连接后重试",
        });
      }, 30000); // 30秒超时

      submitSave(lJSONObject_DataSet, (res) => {
        clearTimeout(timeoutId); // 清除超时定时器
        callback(res);
      });
    },
    handleChange({ raw }) {
      //导入监听文件
      const that = this;
      var reader = new FileReader();
      reader.readAsBinaryString(raw);
      reader.onload = function (e) {
        var data = e.target.result;
        var wb = XLSX.read(data, {
          type: "binary", //以二进制的方式读取
        });
        var sheet = wb.Sheets[wb.SheetNames[0]]; //sheet0代表excel表格中的第一页
        var json = XLSX.utils.sheet_to_json(sheet); //利用接口实现转换。
        let arr = [];
        json.forEach((item) => {
          arr.push({
            Article_Specifications_SerialNumber: item["规格内码"],
            BarCode: item["条形码"],
            isEdit: false,
            isStatus: "0",
            Cause: "",
          });
        });
        that.tableData = arr;
      };
    },
    handleSizeChange(val) {
      this.form.page = 1;
      this.form.limit = val;
    },
    handleCurrentChange(val) {
      this.form.page = val;
    },
    handleEdit(row) {
      //修改当前行
      row.isEdit = !row.isEdit;
    },

    handleClean() {
      //清空
      this.$confirm("是否要清空导入数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData = [];
        })
        .catch(() => {});
    },
  },
};
const { createApp } = Vue;
const app = createApp(App);
//这种方式是引入全部图标，无需单个引入
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
const ElMessage = ElementPlus.ElMessage;
const alert = ElementPlus.alert;
app.use(ElementPlus, { locale: zhCn });
app.mount("#app");
